<template>
    <div>
        <el-container>
            <el-header>
                <h1 class="title1">基础检查信息</h1>
                <el-button class="primaryEditButton" plain="true" type="primary" icon="el-icon-edit" @click="detileUpdate">
                    修改
                </el-button>
            </el-header>
            <el-card class="box-card">
                <div slot="header" class="box-header">
                    <h1>血压</h1>
                </div>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">收缩压</el-tag>
                            <el-tag class="info" type="info">xxxxxxxxx</el-tag>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">收缩压</el-tag>
                            <el-tag class="info" type="info">xxxxxxxx</el-tag>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">药名</el-tag>
                            <el-tag class="info" type="info">xxxxxxx</el-tag>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">剂量</el-tag>
                            <el-tag class="info" type="info">xxxxxxx</el-tag>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="box-header">
                    <h1>体重指数(BMI)</h1>
                </div>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">体重</el-tag>
                            <el-tag class="info" type="info">xxxxxxxxx</el-tag>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">身高</el-tag>
                            <el-tag class="info" type="info">xxxxxxxx</el-tag>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">体重指数</el-tag>
                            <el-tag class="info" type="info">xxxxxxx</el-tag>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="box-header">
                    <h1>腰臀比(WHR)</h1>
                </div>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">腰围</el-tag>
                            <el-tag class="info" type="info">xxxxxxxxx</el-tag>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">臀围</el-tag>
                            <el-tag class="info" type="info">xxxxxxxx</el-tag>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-tag effect="dark" size="medium" type="warning">腰臀比</el-tag>
                            <el-tag class="info" type="info">xxxxxxx</el-tag>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-container>
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body></el-dialog>
    </div>
</template>
  
<script>
import {
    listUser,
    getUser,
    delUser,
    addUser,
    updateUser,
} from "@/api/system/user";

export default {
    data() {
        return {
            open: false,
            title: "",
            checkDate: null,
            mensesDate: null,
            width: null,
        };
    },
    methods: {
        //修改辅助检查信息
        detileUpdate(row) {
            const userId = row.userId || this.ids;
            getUser(userId).then((response) => {
                this.open = true;
                this.title = "修改辅助检查信息";
            });
        },
        reset() {
            this.form = {};
        },
    },
    submitForm() {
        this.$refs["form"].validate((valid) => {
            if (valid) {
                if (this.form.userId != null) {
                    updateUser(this.form).then((response) => {
                        this.$modal.msgSuccess("修改成功");
                        this.open = false;
                        this.getList();
                    });
                } else {
                    addUser(this.form).then((response) => {
                        this.$modal.msgSuccess("新增成功");
                        this.open = false;
                        this.getList();
                    });
                }
            }
        });
    },
    cancel() {
        this.open = false;
        this.reset();
    },
};
</script>
<style>
.title1 {
    padding-left: 160px;
}

h1 {
    padding-left: 10px;
    font-size: x-large;
    font-weight: bold;
    display: inline-block;
}

.primaryEditButton {
    position: absolute;
    right: 180px;
    top: 20px;
}

.box-card {
    position: relative;
    margin: auto;
    width: 80%;
    top: 10px;
    margin-bottom: 20px;
}

.box-header {
    padding-left: 10px;
    color: #f59a23;
}

.info {
    margin-left: 10px;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-tag {
    margin-bottom: 20px;
}

.content {
    margin-bottom: 20px;
}
</style>